<template>
  <div>
    <!-- 工具栏 -->
    <div>
      <el-row>
        <el-col :span="8">
          <!-- 操作按钮 -->
          <div class="operation-div">
            <el-button type="primary" @click="fetchDeletedUsers">刷新列表</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表格内容 -->
    <div>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        :header-cell-style="{ background: '#ECF5FF' }"
      >
        <el-table-column type="index" label="序号"/>
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="fullname" label="全名" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="email" label="邮件" />
        <el-table-column prop="area" label="地区" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="restoreUser(scope.row.userId)">恢复</el-button>
            <el-button size="small" type="danger" @click="permanentlyDeleteUser(scope.row.userId)">永久删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="margin-top: 20px">
        <el-pagination
          v-model:current-page="pageData.currentPage"
          v-model:page-size="pageData.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="->, jumper, total, sizes, prev, pager, next"
          :total="pageData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  getDeletedUsersService,
  restoreUserService,
  permanentlyDeleteUserService
} from '@/api/user.js';

// 表格数据
const tableData = ref([]);

// 分页数据
const pageData = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 获取已删除用户列表
const fetchDeletedUsers = async () => {
  const params = {
    currentPage: pageData.currentPage,
    pageSize: pageData.pageSize
  };
  try {
    const result = await getDeletedUsersService(params);
    pageData.total = result.data.total;
    tableData.value = result.data.items;
  } catch (error) {
    console.error(error);
    ElMessage.error('获取被删除用户列表失败');
  }
};
fetchDeletedUsers();

// 分页插件，每页条数发生改变时
const handleSizeChange = (val) => {
  pageData.pageSize = val;
  fetchDeletedUsers();
};

// 分页插件，当页码发生改变时
const handleCurrentChange = (val) => {
  pageData.currentPage = val;
  fetchDeletedUsers();
};

// 恢复用户
const restoreUser = async (userId) => {
  if (!userId) {
    ElMessage.error('用户 ID 不能为空');
    return;
  }
  try {
    let result = await restoreUserService(userId);
    ElMessage.success(result.msg ? result.msg : '恢复成功');
    fetchDeletedUsers();
  } catch (error) {
    console.error(error);
    ElMessage.error('恢复失败');
  }
};

// 永久删除用户
const permanentlyDeleteUser = (userId) => {
  if (!userId) {
    ElMessage.error('用户 ID 不能为空');
    return;
  }
  ElMessageBox.confirm('确认要永久删除吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      try {
        let result = await permanentlyDeleteUserService(userId);
        ElMessage.success(result.msg ? result.msg : '永久删除成功');
        fetchDeletedUsers();
      } catch (error) {
        console.error(error);
        ElMessage.error('删除失败');
      }
    })
    .catch(() => {});
};
</script>

<style scoped>
.operation-div {
  width: 100%;
  text-align: left;
  padding-left: 10px;
  padding-top: 10px;
}
</style>
